import dash
from dash import html
import feffery_antd_components as fac

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdAffix(
            fac.AntdRow(
                fac.AntdTitle('XXX质量过程监控中心', level=2),
                style={
                    'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                    'height': '70px',
                    'padding': '20px 20px',
                    'zIndex': 999,
                    'background': '#ffffff'
                }
            )
        ),
        html.Div(
            [
                fac.AntdRow(
                    [
                        fac.AntdCol(
                            fac.AntdRow(
                                [
                                    html.Div(
                                        fac.AntdIcon(
                                            icon='antd-branches',
                                            style={
                                                'fontSize': '25px',
                                                'color': 'rgb(255, 255, 255)',
                                            }
                                        ),
                                        style={
                                            'background': 'rgb(17, 173, 208)',
                                            'height': '80px',
                                            'width': '80px',
                                            'display': 'flex',
                                            'justifyContent': 'center',
                                            'alignItems': 'center',
                                            'position': 'relative',
                                            'left': '20px',
                                            'bottom': '15px',
                                            'borderRadius': '2px'
                                        }
                                    ),
                                    fac.AntdStatistic(
                                        title='监控点个数',
                                        value=666,
                                        style={
                                            'padding': '20px 20px'
                                        }
                                    )
                                ],
                                style={
                                    'border': '1px solid rgb(240, 240, 240)',
                                    'height': '100px',
                                    'display': 'flex',
                                    'justifyContent': 'space-between',
                                    'borderRadius': '2px'
                                }
                            ),
                            span=8
                        ),

                        fac.AntdCol(
                            fac.AntdRow(
                                [
                                    html.Div(
                                        fac.AntdIcon(
                                            icon='antd-car',
                                            style={
                                                'fontSize': '25px',
                                                'color': 'rgb(255, 255, 255)',
                                            }
                                        ),
                                        style={
                                            'background': 'rgb(254, 158, 1)',
                                            'height': '80px',
                                            'width': '80px',
                                            'display': 'flex',
                                            'justifyContent': 'center',
                                            'alignItems': 'center',
                                            'position': 'relative',
                                            'left': '20px',
                                            'bottom': '15px',
                                            'borderRadius': '2px'
                                        }
                                    ),
                                    fac.AntdStatistic(
                                        title='监控点个数',
                                        value=666,
                                        style={
                                            'padding': '20px 20px'
                                        }
                                    )
                                ],
                                style={
                                    'border': '1px solid rgb(240, 240, 240)',
                                    'height': '100px',
                                    'display': 'flex',
                                    'justifyContent': 'space-between',
                                    'borderRadius': '2px'
                                }
                            ),
                            span=8
                        ),

                        fac.AntdCol(
                            fac.AntdRow(
                                [
                                    html.Div(
                                        fac.AntdIcon(
                                            icon='antd-save',
                                            style={
                                                'fontSize': '25px',
                                                'color': 'rgb(255, 255, 255)',
                                            }
                                        ),
                                        style={
                                            'background': 'rgb(247, 89, 64)',
                                            'height': '80px',
                                            'width': '80px',
                                            'display': 'flex',
                                            'justifyContent': 'center',
                                            'alignItems': 'center',
                                            'position': 'relative',
                                            'left': '20px',
                                            'bottom': '15px',
                                            'borderRadius': '2px'
                                        }
                                    ),
                                    fac.AntdStatistic(
                                        title='监控点个数',
                                        value=666,
                                        style={
                                            'padding': '20px 20px'
                                        }
                                    )
                                ],
                                style={
                                    'border': '1px solid rgb(240, 240, 240)',
                                    'height': '100px',
                                    'display': 'flex',
                                    'justifyContent': 'space-between',
                                    'borderRadius': '2px'
                                }
                            ),
                            span=8
                        ),
                    ],
                    gutter=20,
                    style={
                        'padding': '30px 40px'
                    }
                )
                for i in range(10)
            ]
        ),
        fac.AntdSpace(
            [
                fac.AntdTooltip(
                    fac.AntdButton(
                        fac.AntdIcon(
                            icon='antd-question-circle',
                        ),
                        type='text',
                        shape='circle'
                    ),
                    title='获取帮助'
                ),
                fac.AntdTooltip(
                    fac.AntdButton(
                        fac.AntdIcon(
                            icon='antd-bug',
                        ),
                        type='text',
                        shape='circle'
                    ),
                    title='bug反馈'
                ),
                fac.AntdTooltip(
                    fac.AntdButton(
                        fac.AntdIcon(
                            icon='antd-comment',
                        ),
                        type='text',
                        shape='circle'
                    ),
                    title='联系我们'
                )
            ],
            direction='vertical',
            style={
                'position': 'fixed',
                'bottom': '20px',
                'right': '8px'
            }
        )
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True, dev_tools_ui=False)
